<template>
  <div class="bg-purple">

    <h6 class="hLabel">商户信息</h6>
    <div class="subjectInformationLeft">
      <div class="subjectInformationTitle">
        <div class="title">
          <div> 商户经营类型 </div>
          <div> 注册名称 </div>
          <div> 经营名称 </div>
          <div>商户类型</div>
          <div> 行业大类 </div>
          <div> 商户区域 </div>
        </div>
        <div class="content">
          <div>
            {{ merModeType(detailsList.dsfMerinfo.merMode)}}
          </div>
          <el-tooltip class="item"
                      effect="dark"
                      :content="detailsList.dsfMerinfo.merName "
                      placement="top">
            <div class="font-overflow">
              {{ detailsList.dsfMerinfo.merName }}
            </div>
          </el-tooltip>
          <div>
            {{ detailsList.dsfMerinfo.businName }}
          </div>

          <el-tooltip class="item"
                      effect="dark"
                      :content="detailsList.dsfMerinfo.merType "
                      placement="top">
            <div class="font-overflow">
              {{ detailsList.dsfMerinfo.merType }}</div>
          </el-tooltip>

          <div>
            {{  standardFlag(detailsList.dsfMerinfo.standardFlag)}}

          </div>
          <div>
            {{ detailsList.dsfMerinfo.merArea }}
          </div>
        </div>
      </div>
      <div class="subjectInformationContent">
        <div class="title">
          <div> 注册地址 </div>
          <div> 营业时间</div>
          <div> 公司规模 </div>
          <div> 经营形态 </div>

        </div>
        <div class="content">
          <div class="font-overflow">
            {{ detailsList.dsfMerinfo.merAddr }}
          </div>
          <div class="font-overflow">
            {{ detailsList.dsfMerinfo.businBegtime }} -- {{ detailsList.dsfMerinfo.businEndtime }}
          </div>
          <div>
            {{ employeeNum(detailsList.dsfMerinfo.employeeNum) }}
          </div>
          <div>
            {{  businForm(detailsList.dsfMerinfo.businForm) }}
            <!-- {{  businForm(detailsList.dsfMerinfo.businForm) }} -->
          </div>

        </div>
      </div>
    </div>
    <h6 class="hLabel">附加条件</h6>
    <div class="subjectInformationLeft">
      <div class="subjectInformationTitle">
        <div class="title">
          <div> 法定代表人姓名 </div>
          <div> 法人证件类型 </div>
          <div> 法人证件号码 </div>
          <div> 法人证件有效期 </div>
          <div> 法人手机号 </div>
          <div>商户联系人姓名</div>
        </div>
        <div class="content">
          <div> {{  detailsList.dsfPlusinfo.merLegal}} </div>

          <div class="font-overflow">
            {{ legalType(detailsList.dsfPlusinfo.legalType) }}
          </div>

          <div>
            {{detailsList.dsfPlusinfo.legalCode  }}

          </div>
          <div>
            {{JSON.parse(detailsList.dsfPlusinfo.legalValidity)[0]}} -- {{ JSON.parse(detailsList.dsfPlusinfo.legalValidity)[1] }}

          </div>
          <div>
            {{detailsList.dsfPlusinfo.legalPhone  }}

          </div>
          <div>
            {{detailsList.dsfPlusinfo.linkMan }}

          </div>
        </div>
      </div>
      <div class="subjectInformationContent">
        <div class="title">
          <div> 商户联系人证件类型 </div>
          <div> 商户联系人证件号码 </div>
          <div> 商户联系人证件有效期</div>
          <div> 商户联系人手机号</div>
        </div>
        <div class="content">
          <div class="font-overflow">
            {{ legalType(detailsList.dsfPlusinfo.linkmanType) }}
          </div>
          <div> {{ detailsList.dsfPlusinfo.linkmanCode }} </div>

          <div> {{ JSON.parse(detailsList.dsfPlusinfo.linkmanValidity)[0] }} -- {{ JSON.parse(detailsList.dsfPlusinfo.linkmanValidity)[1]  }} </div>
          <div> {{ detailsList.dsfPlusinfo.linkmanPhone }} </div>
        </div>
      </div>
    </div>
    <h6 class="hLabel">营业执照信息</h6>
    <div class="subjectInformationLeft">
      <div class="subjectInformationTitle">
        <div class="title">
          <div> 统一社会信用码 </div>
          <div> 营业执照类型 </div>
          <div> 营业执照有效期 </div>
          <div> 主营业务 </div>
          <div> 注册资本 </div>
        </div>
        <div class="content">
          <div class="font-overflow">
            {{ detailsList.dsfLicinfo.merLic }}
          </div>
          <el-tooltip class="item"
                      effect="dark"
                      :content="licenseType(detailsList.dsfLicinfo.licenseType) "
                      placement="top">
            <div class="font-overflow">
              {{ licenseType(detailsList.dsfLicinfo.licenseType) }}</div>
          </el-tooltip>
          <div>{{ JSON.parse(detailsList.dsfLicinfo.licValidity)[0] }} -- {{ JSON.parse(detailsList.dsfLicinfo.licValidity)[1] }} </div>
          <div>{{ detailsList.dsfLicinfo.businScope }} </div>
          <div>{{ detailsList.dsfLicinfo.capital }} </div>
        </div>
      </div>
      <div class="subjectInformationContent">
        <div class="title">
          <div> 注册地址 </div>
          <div> 实际控制人姓名 </div>
          <div> 实际控制人证件号码 </div>
          <div> 实际控制人证件种类 </div>
          <div> 实际控制人证件有效期 </div>
        </div>

        <div class="content">
          <div>{{ detailsList.dsfLicinfo.licAddr }} </div>

          <div>{{ detailsList.dsfLicinfo.controlerName }} </div>

          <div>{{ detailsList.dsfLicinfo.controlerLegalCode }} </div>

          <div class="font-overflow">{{ legalType(detailsList.dsfLicinfo.controlerLegalType) }} </div>

          <div>{{ JSON.parse(detailsList.dsfLicinfo.controlerLegalValidity)[0] }} -- {{ JSON.parse(detailsList.dsfLicinfo.controlerLegalValidity)[1] }} </div>
        </div>

      </div>
    </div>
    <h6 class="hLabel">结算账户信息</h6>
    <div class="subjectInformationLeft">
      <div class="subjectInformationTitle">
        <div class="title">
          <div> 开户行名称 </div>
          <div> 开户行行号 </div>
          <div> 账号 </div>
          <div> 账户名称 </div>
          <div> 账户类型 </div>

        </div>
        <div class="content">
          <div>{{  detailsList.dsfAccinfo.bankName }}</div>
          <div> {{ detailsList.dsfAccinfo.bankCode }} </div>
          <div>
            {{ detailsList.dsfAccinfo.account }}
          </div>
          <div>
            {{ detailsList.dsfAccinfo.accName }}
          </div>
          <div>
            {{ detailsList.dsfAccinfo.accType=='00'?'个人(对私)':'对公' }}
          </div>
        </div>
      </div>
      <div class="subjectInformationContent">
        <div class="title">
          <div> 证件类型 </div>
          <div> 证件号</div>
          <div> 对私手机号</div>
        </div>
        <div class="content">
          <div class="font-overflow">{{ legalType(detailsList.dsfAccinfo.legalType) }}</div>
          <div> {{ detailsList.dsfAccinfo.legalCode?detailsList.dsfAccinfo.legalCode:'----'  }}</div>
          <div> {{ detailsList.dsfAccinfo.accPhone?detailsList.dsfAccinfo.accPhone:'----'  }}</div>
        </div>
      </div>
    </div>
    <h6 class="hLabel">图片信息预览</h6>
    <div class="subjectInformationLeft">
      <div class="subjectInformationTitle">
        <div class="title">
          <div> 法人身份证正面 </div>
          <div> 法人身份证国徽面 </div>
          <div> 营业执照图片 </div>
          <div> 收银台图片 </div>
          <div> 账户类型 </div>

        </div>
        <div class="content">
          <div>
            <div class="view"
                 @click="onPreview('')">查看预览</div>
          </div>
          <div>
            <div class="view"
                 @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          </div>
          <div>
            <div class="view"
                 @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          </div>
          <div>
            <div class="view"
                 @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          </div>
          <div>
            <div class="view"
                 @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          </div>
        </div>
      </div>
      <div class="subjectInformationContent">
        <div class="title">
          <div> 内部环境照图片 </div>
          <div> 营业场所门头照图片</div>
          <div> 门牌号图片</div>
        </div>
        <div class="content">
          <div class="view"
               @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          <div class="view"
               @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
          <div class="view"
               @click="onPreview('https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png,https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1702455815618.png')">查看预览</div>
        </div>
      </div>
      <el-image-viewer v-if="showViewer"
                       style="z-index: 9999"
                       :on-close="closeViewer"
                       :url-list="imgViewArr" />
    </div>

  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { getRegionLabel, cityData } from 'ele-admin/packages/utils/regions';
export default {
  name: 'incomingDetails',
  components: {
    ElImageViewer
  },
  props: {
    detailsList: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      showViewer: false, // 显示查看器
      // 图片预览数组
      imgViewArr: []
    };
  },
  methods: {
    // 点击按钮预览图片
    onPreview (imgStr) {
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.showViewer = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    }
  },
  computed: {
    // 营业执照
    urlListArray () {
      return this.imgViewArr;
    },
    // ** 隐私部分带*号
    hiddenCardId () {
      return function (str, frontLen = 5, endLen = 6) {
        //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
        var len = str.length - frontLen - endLen;
        var start = '';
        for (var i = 0; i < len; i++) {
          start += '*';
        }
        // 最后的返回值由三部分组成
        return (
          str.substring(0, frontLen) +
          start +
          str.substring(str.length - endLen)
        );
      };
    },
    //  code码获取城市标题
    getRegionLabel () {
      return function (params) {
        console.log(cityData);

        return getRegionLabel(params);
      };
    },
    // 商户经营类型 
    merModeType () {
      return function (merMode) {
        if (merMode == '0') {
          return '企业';
        } else if (merMode == '1') {
          return '个体户';
        } else {
          return '小微'
        }
      };
    },
    // 行业大类
    standardFlag () {
      return function (standardFlag) {
        if (standardFlag == '0') {
          return '标准';
        } else if (standardFlag == '1') {
          return '优惠';
        } else {
          return '减免'
        }
      };
    },
    // 公司规模
    employeeNum () {
      return function (employeeNum) {
        if (employeeNum == '1') {
          return '0-50人';
        } else if (employeeNum == '2') {
          return '50-100人';
        } else {
          return '100以上'
        }
      };
    },
    // 经营形态
    businForm () {
      return function (businForm) {
        if (businForm == '02') {
          return '普通店';
        } else if (businForm == '01') {
          return '连锁店';
        }
      };
    },
    // 证件类型：
    legalType () {
      return function (legalType) {
        if (legalType == '0') {
          return '居民身份证或临时身份证';
        } else if (legalType == '1') {
          return '外国公民护照';
        } else if (legalType == '2') {
          return '港澳居民来往大陆通行证或其他有效旅游证件';
        } else if (legalType == '3') {
          return '其他类个人身份有效证件';
        } else if (legalType == '4') {
          return '单位证件';
        } else if (legalType == '5') {
          return '军人或武警身份证件';
        }

      };
    },
    licenseType () {
      return function (licenseType) {
        if (licenseType == '01') {
          return '营业执照类型';
        } else if (licenseType == '02') {
          return '其他证明文件';
        } else if (licenseType == '03') {
          return '工商注册号';
        } else if (licenseType == '04') {
          return '事业单位法人证书';
        } else if (licenseType == '05') {
          return '民办非企业单位登记证书';
        } else if (licenseType == '06') {
          return '基金会法人登记证书';
        }

      };
    }
  }
};
</script>
<style lang="less" scoped>
.bg-purple {
  margin-top: 20px;
  padding-bottom: 50px;
  padding: 26px;
  // h标签
  min-width: 850px;
  .hLabel {
    margin: 10px 0 20px;
    font-weight: 700;
    &::before {
      content: '';
      display: inline-block;
      vertical-align: top;

      margin-right: 5px;
      height: 23px;
      width: 6px;
      background-color: #1e6ceb;
    }
  }

  .subjectInformationLeft {
    display: flex;
    align-items: center;
    justify-content: center;

    .subjectInformationTitle {
      width: 792px;

      //   background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        margin-right: 46px;
        text-align: right;
        width: 142px;
        div {
          color: #666;
          margin: 10px 0 10px;
        }
      }
      .content {
        width: 250px;
        div {
          color: #000;
          margin: 10px 0 10px;
        }
        .view {
          color: #1e6ceb;
          cursor: pointer;
        }
      }
    }
    .subjectInformationContent {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        margin-right: 46px;
        text-align: right;
        width: 140px;
        div {
          color: #666;
          margin: 10px 0 10px;
        }
      }
      .content {
        width: 250px;
        div {
          color: #000;
          margin: 10px 0 10px;
        }
        .view {
          color: #1e6ceb;
          cursor: pointer;
        }
      }
      width: 792px;

      //   background-color: aquamarine;
    }
  }
}
</style>
